<template>
    <div class="echarts-box">
        <div id="columnEcharts" :style="{ width: this.width, height: this.height }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { onMounted, onUnmounted, watch } from "vue"

export default {
    name: 'ColumnChart',
    props: ["width", "height", "data"],
    setup(props) {
        let myEcharts = echarts

        // onMounted(() => {
        //     initChart()
        // })

        watch(() => props.data, newVal => {
            const data = JSON.parse(JSON.stringify(newVal))
            if (newVal) {
                initChart(data)
            } else {
                onMounted(() => {
                    initChart()
                })
            }
        })

        onUnmounted(() => {
            myEcharts.dispose
        })

        function initChart(data) {
            let chart = myEcharts.init(document.getElementById("columnEcharts"), "purple-passion");
            chart.setOption({
                title: {
                    text: '密集架数量',
                    top: 'top',
                    left: 'center',
                    textStyle: {
                        fontSize: 20,
                        fontWeight: '',
                        color: '#000'
                    },
                },//标题
                legend: {
                    left: 'right',
                    textStyle: { //图例文字的样式
                        color: '#000',
                        fontSize: 16,
                        data: ['档案总数', '在馆']
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true

                },
                calculable: true,
                grid: {
                    left: '10',
                    top: '30',
                    right: '10',
                    bottom: '10',
                    containLabel: true
                },

                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        color: "rgba(0, 0, 0, .6)",
                        fontSize: 12,
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, .2)'
                        }

                    },
                    data: data.getCabinetName
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, .1)'
                        }
                    },
                    axisLabel: {
                        // textStyle: {
                        color: "rgba(0, 0, 0, .6)",
                        fontSize: 12,
                        // },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, .1)'
                        }
                    }
                }],
                series: [{
                    name: '档案盒数',
                    type: 'bar',
                    barGap: '1%',
                    itemStyle: {
                        color: '#2f89cf',
                        opacity: 1,
                        borderRadius: 5
                    },
                    labelLine: {
                        length: 5
                    },

                    label: {
                        formatter: '{c}',
                        color: '#000'
                    },
                    data: data.boxNumArr,
                    axisPointer: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    position: 'bottom',
                    offset: 20,
                    barWidth: 20, //柱图宽度
                },
                {
                    name: '档案数',
                    type: 'bar',
                    itemStyle: {
                        color: '#27d08a',
                        opacity: 1,
                        borderRadius: 5
                    },
                    barWidth: 20, //柱图宽度
                    data: data.archiveNumArr
                }
                ]
            });
            window.onresize = function () {
                chart.resize();
            };
        }
        return {
            initChart
        };
    }
};
</script>